<template>
  <div>
    <NavHead>
      <template v-slot:iconfont-left>
        <i class="iconfont icon-arrowLeft arrow" @click="$router.back()"></i>
      </template>
      <template v-slot:title>
        <p class="names">卧室</p>
      </template>
      <template v-slot:iconfont-right>
        <i class="iconfont icon-caidan point" @click="jumpRoomStorage"></i>
      </template>
    </NavHead>
    <div class="pic" >
        <img :src="img" alt="" />
      </div>
    
    <div v-for="(item,index) in lists" :key="index">
      
      <div class="top">
            <p class="title">{{item.title}}</p>
            <p class="big">></p>
        </div>
        <div class="list">
            <ul class="uls" >
                <li v-for="(item_det,index) in item.data" :key="index">
                    <img :src="item_det.img" alt="" />
                    <p><span>{{item_det.title}}</span> <span>{{item_det.type}}</span> </p>
                    <p class="price">¥ {{item_det.money}}</p>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import NavHead from "../../components/NavHead";
import api from "../../api";
export default {
  name: "Bedroom",
  components: {
    NavHead,
  },
  data(){
      return{
          list:[],
          lists:[],
          img:'',
      }
  },
  props: {
    id: {
      data: String,
      default: "",
    },
  },
  mounted() {
    // console.log(api.getBedroom());
    console.log( this.id);
    api.getBedroom({
          id:this.id
      }).then(res => {
        // console.log(res);
          // console.log(res.data);
          this.lists=res.data.list
          this.img = res.data.list[0].img
          // console.log(this.lists)
      })
  },
  methods:{
    jumpRoomStorage(){
      this.$router.push({name:'RoomStorage'})
    }
  }
};
</script>

<style lang="less" scoped>
.arrow {
  color: #fff;
  margin-top: 0.3rem;
}
.point {
  color: #fff;
  font-size: 0.58rem;
}
.names {
  color: #fff;
  font-size: 0.4rem;
}
.pic img {
  width: 100%;
  height: 6rem; 
}
.top{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0 0.2rem;
    .title{
        flex: 1;
        text-align: left;
        font-size: 0.24rem;
        margin-bottom: 0.1rem;
    }
    .big{
        flex:1;
        text-align: right;
        color:red
    }
}
.list {
  width: 100%;
  padding-bottom: .1rem;
  
  .uls {
    display: flex;
    
  }
  .uls p{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .uls p span{
    font-size: 0.24rem;
    
  }
  .title {
    font-size:0.24rem;
  }
  li {
    height: 2.6rem;
    width: 25%;
    flex: 1;
    margin: 0 0.2rem;
    border-radius: 1px solid #d3d3d3;
    box-sizing: border-box;
    -webkit-box-shadow: #ccc 0px 0px 10px;
    -moz-box-shadow: #ccc 0px 0px 10px;
    box-shadow: #ccc 0px 0px 10px;
    img {
      width: 100%;
      height: 1.8rem;
    }
    p{
        font-size: 0.32rem;
        color:#696969 ;
        text-align: center;
    }
    .price{
        color: indianred;
        font-size: 0.24rem;
    }
  }
}
</style>
